<template>
    <div id="login-warp">

        <el-upload
                class="upload-demo"
                drag
                :action="uploadParams.url"
                :headers="uploadParams.headers"
                :data="uploadParams.form"
                :name="uploadParams.name"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div id="login">
            <transition :name="settings.visible ? 'slideleft' : 'slideright'">
                <IConfig v-if="settings.visible"/>
                <!-- IConfig -->
                <div class="login">
                    <div class="logo-info">
                        <img class="logo" src="@/assets/quhai.png" alt="logo">
                        <p class="name">趣嗨 <br>
                            <span class="sub"></span>
                        </p>
                    </div>
                    <!-- .logo-info -->
                    <IForm ref="login" :model="form" :elem="loginElem" :rules="loginRule"
                           :btn-loading="$store.state.app.loading" btn-long submit-text="登  录"
                           @on-submit="handleLogin"/>
                    <!-- IForm -->
                    <p class="version"><span
                            style="display: inline-block;width: 130px;height: 53px;border: 1px solid #D7D7D7;"
                    >
        <img id="img" :src="imageVerifyUrl" @click="changeImgCode" style="width: 100%;height: 100%;cursor: pointer;"/>
        </span></p>
                    <a v-if="settings.button" class="settings" href="#"
                       @click.prevent="settings.visible = !settings.visible">
                        <Icon :type="settings.visible ? 'md-laptop' : 'md-construct'" size="16"
                              style="margin-top: -2px;"/>
                        <strong>{{ settings.visible ? 'Login' : 'Settings'}}</strong>
                    </a>
                    <!-- .version -->
                </div>

            </transition>
        </div>
        <!-- #login -->
        <IError/>
        <!-- IError -->
    </div>
</template>
<script>
    import config from "@/config";
    import ax from "@/utils/axios";
    import {_login} from "@/services/app";
    import IConfig from "@/layouts/partials/Config";
    import IError from "@/layouts/partials/Error";

    export default {
        name: "Login",
        components: {
            IConfig,
            IError
        },
        data: () => ({
            imageVerifyUrl: "",
            uploadParams: {
                url: "",
                headers: {
                    Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJ0b2tlbklkIjoiNTExM2M2OGQtMjBhMy00ZGE0LTgyY2QtMjg2MzU0ZmYyNDAwIiwiaWQiOiJrVWlkb1MrYk1KMERHeWNUWGlWZUN3PT0iLCJ1c2VyVHlwZSI6Im1lbWJlciIsInVzZXJuYW1lIjoiMTMyMjIyMjIyMjIiLCJpYXQiOjE1ODM0NzQ5MzAsImV4cCI6MTU4NDMzODkzMH0.PCpkT9OwjdpyjM_GB2Fx3XH4imudbDlaZxfS4YSEz9E",
                    UserType: "sysUser",
                    DeviceId: "hy66xvxrted0kgbpizfiefj4lkxo8jglwugszultki4ay3qlnf",
                    //Content-Type:"multipart/form-data",
                },
                form: {
                    type: 'userIcon'
                },
                name: "file"
            },
            // 设置属性对象
            settings: {
                button: false,
                visible: false
            },
            // 版本属性
            version: "",
            // 表单数据对象(登录)
            form: {
                username: "",
                password: "",
                imageVerifyCode: "",

            },
            // 表单元素数组(登录)
            loginElem: [
                {
                    prop: "username",
                    placeholder: "用户名",
                    prefix: "md-contact"
                },
                {
                    prop: "password",
                    placeholder: "密码",
                    prefix: "md-lock",
                    type: "password"
                },
                {
                    prop: "imageVerifyCode",
                    placeholder: "验证码",
                    prefix: "md-lock",
                }
            ],
            // 表单验证规则(登录)
            loginRule: {
                username: [
                    {
                        required: true,
                        message: "请输入 用户名",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入 密码",
                        trigger: "blur"
                    }
                ],
                imageVerifyCode: [
                    {
                        required: true,
                        message: "请输入 验证码",
                        trigger: "blur"
                    }
                ],
            },
        }),
        mounted() {
            // 初始化上传地址
            this.uploadParams.url = this.ApiUrl + 'upload-center/memberUploadFile'
            // 初始化图片验证码地址
            this.imageVerifyUrl = this.ApiUrl + 'auth-center/v001/Verify/createImage?eventType=login&deviceId=' + this.DeviceId
            const {env, version} = config;
            switch (env) {
                case "release":
                    this.version = `${version} Release`;
                    break;
                case "production":
                    // this.version = `${version} Production`
                    this.version = version;
                    break;
                default:
                    this.settings.button = true;
                    this.form = {
                        username: "jiangf",
                        password: "a123456",
                        imageVerifyCode: "",
                    };
                    this.version =
                        env === "development" ? `${version} Develop` : `${version} Test`;
            }
            // 更新页面 title 元素内容
            this.$store.commit("TITLE", "Login");
        },
        methods: {
            //验证码刷新
            changeImgCode() {
                this.imageVerifyUrl = this.imageVerifyUrl + "&random=" + (Math.ceil(Math.random() * 100000))
                this.form.imageVerifyCode = ""
                this.$forceUpdate()
            },

            // 用户登录
            handleLogin() {

                // 配置默认接口地址
                const baseURL = localStorage.getItem("newBaseAPI") || config.baseURL;
                if (config.env !== "production") {
                    // console.log("API_URL", baseURL);
                }
                ax.defaults.baseURL = baseURL;

                this.$Loading.start();
                this.$store.commit("LOADING", true);

                // 模拟异步请求
                setTimeout(() => {
                    _login(this.form)
                        .then(res => {
                            console.log(res)
                            this.$Loading.finish();
                            this.$store.commit("LOADING", false);
                            if (!res.token) {
                                // 登陆失败
                                return;
                            } else {
                                alert('登陆成功!')
                                const usernameInfo = {
                                    user_token: res.tokenType + res.token,
                                    username: this.form.username,
                                };
                                console.log("存储用户信息:")
                                console.log(usernameInfo)
                                this.$store.commit("USER_INFO", usernameInfo);
                                // 获取菜单列表
                                this.$store.dispatch("handleMenu");
                            }
                        })
                        .catch(() => {
                            this.$Loading.error();
                            this.$store.commit("LOADING", false);
                        });
                }, 800);
            }
        },
    };
</script>
<style lang="postcss" scoped>
    #login {
        box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
        height: 350px;
        left: 50%;
        margin: -175px 0 0 -180px;
        padding: 36px;
        position: fixed;
        top: 50%;
        width: 360px;

    /* 过渡动画 */
    &
    .slideleft-enter-active,

    &
    .slideright-enter-active {
        transform: translateX(0);
        transition: all 0.5s;
    }

    &
    .slideleft-enter,

    &
    .slideright-enter {
        opacity: 0;
    }

    &
    .slideleft-leave-active,

    &
    .slideright-leave-active {
        opacity: 0;
        transition: all 0.5s;
    }

    &
    .slideleft-leave,

    &
    .slideright-leave {
        transform: translateX(0);
    }

    &
    .slideleft-enter,

    &
    .slideright-leave-active {
        transform: translateX(300px);
    }

    &
    .slideleft-leave-active,

    &
    .slideright-enter {
        transform: translateX(-300px);
    }

    /* end */
    &
    .settings {
        bottom: 16px;
        position: absolute;
    }

    &
    .login {
        position: absolute;
        width: 288px;
    }

    &
    .logo-info {
        height: 64px;
        margin-bottom: 22px;
        text-align: center;

    &
    .logo {
        height: 64px;
        margin-right: 10px;
        width: 64px;
        border-radius: 50%;
    }

    &
    .name {
        bottom: 14px;
        display: inline-block;
        font-size: 18px;
        line-height: 20px;
        position: relative;
        text-align: left;
    }

    &
    .sub {
        font-size: 12px;
    }

    }
    &
    .version {
        color: #888;
        text-align: center;
    }

    }
</style>
